<template>
  <up-overlay :show="show">
    <view class="h-full flex flex-col items-center justify-center overflow-auto">
      <view class="change-user-content flex flex-col items-center">
        <text class="content-title">
          请选择对应的孩子
        </text>

        <view class="user-list">
          <view v-for="item in userList" :key="item.id" class="list-item flex items-center" @click="handleConfirm(item)">
            <view class="item-radio" :class="[item.id === chooseUser ? 'choose-radio' : '']" />
            <image class="item-avatar" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/imgs/images/home/${item.gender === 'X' ? `boy_1` : `girl_1`}.png`" />
            <view class="item-name">
              {{ item.userName }}
            </view>
            <image class="item-icon" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/imgs/images/home/${item.gender === 'X' ? 'icon_boy' : 'icon_girl'}.png`" />
          </view>
        </view>

        <!-- <view class="confirm-btn" @click="handleConfirm">
          确认
        </view> -->
        <view class="cancel-btn" @click="loginOut">
          退出登录
        </view>
      </view>

      <image class="close-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/imgs/images/answer/icon_close.png" @click="handleClose" />
    </view>
  </up-overlay>
</template>

<script lang="ts" setup name="ChangeUser">
import { useUserStore } from '@/store';
import type { UserState } from '@/store/modules/user/type';
import { setToken } from '@/utils/auth';
import { switchLogin } from '@/api/user';

defineProps({
  show: {
    type: Boolean,
    default: false,
  },

  userList: {
    type: Array as PropType<UserState[]>,
    default: () => [],
  },
});

const emit = defineEmits(['update:show', 'changeUser']);

const userStore = useUserStore();
const chooseUser = ref<string>('');
const handleConfirm = (item: UserState) => {
  chooseUser.value = item.id;
  userStore.setInfo(item);
  switchLogin({ switchType: 'customer_switch_login', id: item.id }).then((res) => {
    setToken(res.token);
    emit('changeUser');
    emit('update:show', false);
  });
};

const loginOut = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success(res) {
      if (res.confirm) {
        userStore.logout();
        emit('update:show', false);
      }
    },
  });
};

const handleClose = () => {
  emit('update:show', false);
};

watch(() => userStore.id, (newValue) => {
  chooseUser.value = newValue;
});
</script>

<style lang="scss" scoped>
.change-user-content {
  width: 670rpx;
  padding: 59rpx 40rpx;
  background: #fff;
  border-radius: 30rpx;

  .content-title {
    font-size: 40rpx;
    line-height: 59rpx;
    color: #333333;
  }

  .user-list {
    width: 100%;
    padding: 59rpx 0 44rpx 0;

    .list-item {
      height: 119rpx;
      padding: 0 25rpx;

      .item-radio {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 2rpx solid #888888;
      }

      .choose-radio {
        position: relative;
        border-color: #4AAAF8;

        &::after {
          content: '';
          position: absolute;
          top: 8rpx;
          left: 8rpx;
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background: #4AAAF8;
        }
      }

      .item-avatar {
        margin-left: 30rpx;
        width: 99rpx;
        height: 99rpx;
        border-radius: 50%;
      }

      .item-name {
        padding-left: 20rpx;
        padding-right: 15rpx;
        font-size: 35rpx;
        font-weight: 500;
        color: #333333;
      }

      .item-icon {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }

  .confirm-btn {
    width: 100%;
    height: 88rpx;
    font-size: 35rpx;
    font-weight: 500;
    color: #fff;
    line-height: 88rpx;
    text-align: center;
    background: #4AAAF8;
    border-radius: 44rpx;
  }

  .cancel-btn {
    width: 100%;
    padding-top: 20rpx;
    font-size: 35rpx;
    line-height: 40rpx;
    text-align: center;
    color: #666666;
  }
}

.close-icon {
  margin-top: 80rpx;
  width: 80rpx;
  height: 80rpx;
}
</style>
